<template>
  <div class="listFlexBox">
    <ul v-for="(tags, tagsIndex) in tagsArr(data)" :style="{
      marginTop: tagsIndex !== 0 ? proxy.$size(margin) : 0
    }">
      <li v-for="(tag, tagIndex) in tags" :style="{
        width: `calc( (100% + ${proxy.$size(margin)}) /${list} - ${proxy.$size(margin)})`,
        marginRight: tagIndex !== list - 1 ? proxy.$size(margin) : 0,
        padding: proxy.$size(padding),
        minHeight: proxy.$size(height),
      }" @click.stop="() => {
        if (isAdd && tag.isArr) {
          addBtn()
        }
      }">
        <template v-if="isAdd && tag.isArr">
          <div :class="{
            listFlexBoxAdd: isAdd && tag.isArr
          }">
            <el-icon size="22">
              <Plus />
            </el-icon>
            <p>{{ addText }}</p>
          </div>
        </template>
        <template v-else>
          <slot name="item" :row="tag" v-if="$slots.item" />
          <div v-else>{{ tag }}</div>
        </template>
      </li>
    </ul>
  </div>
</template>
<script setup lang="ts">
const { proxy } = getCurrentInstance() as any;
const props = withDefaults(
  defineProps<{
    data: any;
    list?: number;
    margin?: number | string;
    padding?: number | string;
    height?: number | string;
    isAdd?: boolean;
    addText?: string;
  }>(),
  {
    margin: 8,
    padding: 8,
    height: 100,
    list: 4,
    addText: '添加',
  },
);
const tagsArr = (arr: any) => {
  let _arr: any = []
  let _tagArr: any = []
  if (props.isAdd && !!!arr.find((el: any) => el.isArr)) {
    arr.push({
      isArr: true,
    })
  }
  if (proxy.$isArr(arr)) {
    arr.forEach((el: any, index: any) => {
      _tagArr.push(el)
      if (_tagArr.length === props.list || index === arr.length - 1) {
        _arr.push(_tagArr)
        _tagArr = []
      }
    });
  }
  return _arr
}
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'addBtn'): void;
}>();
const addBtn = () => {
  emit('addBtn');
};
</script>
<style scoped lang="scss">
.listFlexBox {
  ul {
    display: flex;

    li {
      border: 1px $border solid;
      border-radius: 4px;
      position: relative;
      overflow: hidden;

      &:hover {
        border-color: $primary;
        color: $primary;
      }

      .listFlexBoxAdd {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        >* {
          margin: 0 !important;

          &:not(:last-child) {
            margin-bottom: 4px !important;
          }
        }
      }
    }
  }
}
</style>
